<template>
  <div class="tupianxianqing">
    <div class="top">
      <div class="zuoshangjiao">
        <img
          class="fanhui"
          @click="$router.push('/GongToEat')"
          src="../assets/image/ic_back_dark_center.png"
          alt=""
        />
        <div class="neirongqu">图片详情</div>
      </div>
      <div class="fenxiang">
        <img src="../assets/image/分享.png" alt="" />
        <span
          ><van-cell title="" @click="showShare = true" />
          <van-share-sheet
            v-model="showShare"
            title="立即分享给好友"
            :options="options"
        /></span>
      </div>
    </div>

    <div class="user">
      <van-skeleton title avatar :row="1" :loading="loading">
        <img src="../assets/image/img_default_avatar.png" alt="" />
        <span class="userxx">
          <h3>{{ foodxq.user_name }}</h3>
          <p>{{ this.nwd }}年前</p>
        </span>
      </van-skeleton>
    </div>

    <div class="meisimg">
      <img :src="foodxq.image_url" alt="" />
    </div>

    <div class="meishixxa">
      <div class="shicai">{{ foodxq.description }}</div>
      <div class="huixian"></div>
    </div>

    <div class="ddd">
      <div class="dibu">
        <div class="dianzan" @click="tiaozhuang">
          <span
            ><img
              class="quantou"
              src="../assets/image/ic_photo_agree.png"
              alt=""
          /></span>
          <span>{{ foodxq.like_ct }}</span>
        </div>
        <!-- <div class="swxx">食物信息</div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foodxq: [],
      shijian: "",
      newdata: "",
      nwd: "",
      loading: true,
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
    };
  },
  created: function () {
    this.getTracks(this.$route.query.id);
    let data = new Date();
    let newd = data.getFullYear();
    this.newdata = newd;
  },
  mounted: function () {
    //  this.nwd = this.newdata - this.shijian;
    //  console.log(this.newdata,this.shijian);
  },
  methods: {
    getTracks: function (id) {
      // console.log(id);
      this.axios
        .get(
          "https://api.kele8.cn/agent/http://food.boohee.com/fb/v1/food_cards/" +
            id
        )
        .then((res) => {
          this.foodxq = res.data;
          //  this.shijian = res.data.post_date.slice(0,4)
          let date = new Date(res.data.post_date);
          this.shijian = date.getFullYear();
          this.nwd = this.newdata - this.shijian;
          this.loading = false;
        });
    },
    shijians: function () {
      // this.shijian.slice(2,9);
      //  var date = new Date();
      //   this.newdata = date.getFullYear();
      //   console.log(date.getFullYear());
      //  this.newdata = this.newdata.getFullYear();
      //   nowDate = new Date();
    },
    tiaozhuang: function () {
      //  this.newdata = date.getFullYear()
      //    var date = new Date();
      //   this.newdata = date.getFullYear();
      //   console.log(date.getFullYear());
      //   console.log(this.newdata);
    },
  },
};
</script>

<style lang="less" scoped>
.tupianxianqing {
  .top {
    width: 100%;
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    background: #ffffff;
    border-bottom: 1px solid #eeedef;
    .zuoshangjiao {
      display: flex;
      align-items: center;
      .fanhui {
        width: 25px;
        height: 25px;
        margin-left: 20px;
      }
      .neirongqu {
        //   width: 100px;
        padding-left: 30px;
      }
    }

    .fenxiang {
      width: 20px;
      margin-right: 20px;
      margin-top: 20px;
    }
  }
  .user {
    display: flex;
    align-items: center;
    height: 40px;
    margin: 10px 0;
    margin-top: 50px;
    img {
      width: 40px;
      border-radius: 50%;
      margin-left: 10px;
    }
    .userxx {
      margin-left: 10px;
      p {
        font-size: 12px;
      }
    }
  }
  .shicai {
    width: 95%;
    font-size: 12px;
    margin-left: 15px;
  }
  .meishixxa {
    margin-bottom: 50px;
  }
  .ddd {
    margin-top: 20px;

    .dibu {
      // display: flex;
      // justify-content: space-between;

      .dianzan {
        //   display: flex;
        //   align-items: center;
        //   justify-content: center;
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 40px;
        background: rgb(255, 255, 255);
        border-top: 1px solid gainsboro;
        //   text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          //   display: flex;
          //   align-items: center;

          .quantou {
            width: 30px;
            height: 30px;
          }
        }
      }

      // .swxx{
      //     width: 60%;
      //     height: 40px;
      //     line-height: 40px;
      //     text-align: center;
      //     font-size: 14px;
      //     color: white;
      //     background:#FF5A5F ;

      //  }
    }
  }
}
van-share-sheet {
  width: 70%;
}
</style>